<template>
  <div class="header overflow">
 
    <div class="item_style mr20">
      <el-dropdown trigger="click" @command="handleCommand">
        <el-avatar :size="40" src="/touxiang.jpg" />
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              我的信息
            </el-dropdown-item>
            <el-dropdown-item
              v-for="item in dropdownList"
              :key="item.value"
              :command="item.value"
              >{{ item.label }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";



const router = useRouter();

const dropdownList = reactive<any>([
  {
    label: "退出登录",
    value: "logout",
  },
]);
const logout = () => {
  
  router.replace({
    path: "/login",
  });
  ElMessage({
    type: "success",
    message: "退出成功",
  });
};
const handleCommand = (command: string | number | object) => {
  switch (command) {
    case "logout":
      ElMessageBox.confirm("确认退出吗？", "Warning", {
        type: "warning",
      })
        .then(() => {
          logout();
        })
        .catch(() => {});
      break;

    default:
      break;
  }
};
</script>
<style scoped>

.el-dropdown {
  line-height: 60px;
}
</style>
